<template>
    <div class="add-wms-in">
        <div class="clearfix text-c border-b-eded height-24 line-height-19 pl-20 pr-20">
            <a-button size="small" type="primary" class="mt-5" @click="submit">提交</a-button>
            <a-button size="small" class="pull-left mt-5 mr-5" @click="$router.go(-1)">返回</a-button>
        </div>
        <div class="padding-10">
            <div class="add-wms-in-form text-c pb-10">
                <a-form-model
                        ref="ruleForm"
                        :layout="'inline'"
                        small
                        :model="form">
                    <a-form-model-item label="入库员">
                        <a-input v-model="form.intoUserName" placeholder="请输入入库员" />
                    </a-form-model-item>
                    <a-form-model-item label="提供商">
                        <a-input v-model="form.provideName" placeholder="请输入提供商" />
                    </a-form-model-item>
                    <a-form-model-item label="备注">
                        <a-input v-model="form.remark" placeholder="请输入备注" />
                    </a-form-model-item>
                </a-form-model>
            </div>
            <vxe-grid
                    ref="addWmsInTable"
                    border
                    size="mini"
                    resizable
                    auto-resize
                    highlight-hover-row
                    highlight-current-row
                    :toolbar="tableToolbar"
                    export-config
                    :columns="columns"
                    :data="tableData">
                <template v-slot:toolbar_buttons>
                    <div class="clearfix">
                        <a-button class="pull-left ml-10" type="primary" size="small" icon="plus" @click="addGoods">新增产品</a-button>
                        <div class="ml-20 pull-left fs-16">总金额：<span class="color-red">{{totalPrice | money}}</span></div>
                    </div>
                </template>
                <template v-slot:productAttribute="{row}">
                    <div class="width-percent-100">
<!--                        <a-button style="vertical-align: top" size="small" type="primary" icon="plus"></a-button>-->
                        <div v-if="row.productAttrArr && row.productAttrArr.length > 0">
                            <p-over-text
                                    class="width-percent-100"
                                    title="属性值"
                                    :clamp="1"
                                    :text="row.productAttrArr.map(item => item.productAttrValueName).join('，')"
                                    :height="24">
                            </p-over-text>
                        </div>
                    </div>
                </template>
                <template v-slot:intoCount="{row}">
                    <a-input-number class="width-percent-100" placeholder="请输入入库数量" :precision="0" :min="1" v-model="row.intoCount" />
                </template>
                <template v-slot:intoPrice="{row}">
                    <a-input-number class="width-percent-100" placeholder="请输入入库价格" :precision="2" v-model="row.intoPrice" />
                </template>
                <template v-slot:remark="{row}">
                    <a-input class="width-percent-100" placeholder="请输入备注" v-model="row.remark" />
                </template>
                <template v-slot:action="{ row, column }">
                    <a-button size="small" type="danger" icon="delete" @click="delWmsIn(column)"></a-button>
`                </template>
            </vxe-grid>
        </div>
        <goods-modal ref="goodsModal" @done="done"></goods-modal>
    </div>
</template>

<script>
    let defaultColumns = [
        // 对应自定义插槽的名称
        { type: 'seq', fixed: 'left', title: '序号', width: 60, noColumnsSet: true, resizable: false },
        { title: '产品名称', width: 150, align: 'center', field: 'productName' },
        { title: '入库数量', minWidth: 160, align: 'center', slots: {default: 'intoCount'} },
        { title: '入库价格', minWidth: 160, align: 'center', slots: {default: 'intoPrice'} },
        { title: '备注', minWidth: 120, align: 'center', slots: {default: 'remark'} },
        { title: '属性值', minWidth: 250, align: 'left',  slots: {default: 'productAttribute'} },
        { title: '操作', width: 60, align: 'center', fixed: 'right', resizable: false, noColumnsSet: true, slots: { default: 'action'},},
    ];
    import goodsModal from './goodsModal';
    export default {
        components: {
            goodsModal,
        },
        data () {
            return {
                form: {
                    intoUserName: '',
                    provideName: '',
                    remark: ''
                },
                tableToolbar: {
                    perfect: true,
                    // export: {
                    //     icon: 'fa fa-download'
                    // },
                    zoom: true,
                    slots: {
                        buttons: 'toolbar_buttons'
                    }
                },
                tableData: [],
                columns: JSON.parse(JSON.stringify(defaultColumns)),
            };
        },
        computed: {
            totalPrice () {
                let temPrice = 0;
                this.tableData.forEach(ele => {
                    let _temp = (ele.intoCount * ele.intoPrice) || 0;
                    temPrice += _temp;
                });
                return temPrice;
            }
        },
        methods: {
            addGoods () {
                this.$refs.goodsModal.show();
            },
            done (data) {
                this.tableData.push(data);
            },
            delWmsIn (index) {
                this.tableData.splice(index, 1);
            },
            submit () {
                if (this.tableData.length === 0) {
                    this.$message.error('请选择入库产品');
                    return;
                }
                let addWarehouseInDTO = {
                    intoUserName: this.form.intoUserName,
                    provideName: this.form.provideName,
                    remark: this.form.remark,
                    warehouseInDetailDTOs: this.filterWmsInGoods(JSON.parse(JSON.stringify(this.tableData))),
                };
                this.$api.wms.addwarehousein(addWarehouseInDTO).then(res => {
                    if (res && res.code !== 200) {
                        this.$message.error(res.errorMsg);
                        return;
                    }
                    this.$message.success('新增待入库单成功');
                    this.$router.go(-1);
                }).catch(err => {
                    this.$message.error(err.errorMsg);
                });
            },
            filterWmsInGoods (data) {
                return data.map(item => {
                   return {
                       intoCount: item.intoCount,
                       intoPrice: item.intoPrice,
                       productId: item.productId,
                       remark: item.remark,
                       propertyValue: item.productAttrArr.map(v => v.productAttrValueName),
                   };
                });
            }
        }
    };
</script>

<style scoped lang="scss">

</style>
